<template>
  <div class="inner-container">
    <div class="section-title">基本信息</div>
    <!-- --------------------------------------------------修改表单-------------------------------------------------------- -->

      <el-row >
        <el-col :span="8">
          <el-descriptions >
            <el-descriptions-item label="客户状态">{{customerStatusFormatter(formData.status)}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="8">
          <el-descriptions >
            <el-descriptions-item label="客户类型">{{customerTypeFormatter(formData.type)}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="8">
          <el-descriptions >
            <el-descriptions-item label="订单编号">{{formData.orderNumber}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>



    <el-row >
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="客户名称" >{{formData.name}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="客户性别">{{genderStatusFormatter(formData.gender)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item  label="年龄">{{formData.age}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>


    <el-row >
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="联系电话">{{formData.contactPhone}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="身份证号">{{formData.idNumber}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>


    <el-row >
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="楼盘名称">{{formData.propertyName}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="户型">{{customerHouseTypeFormatter(formData.houseType)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="面积">{{formData.houseSize}} m²</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
<!--    {{ addressList.find(addr => addr.id === customerInfo.addressId)?.name || '未知地址' }}-->
    <el-row >
      <el-col :span="8">
        <el-descriptions>
          <el-descriptions-item label="楼盘名称">{{customerProvinceFormatter(formData.province)}} {{customerCityFormatter(formData.city)}}
            {{customerDistrictFormatter(formData.district)}} {{formData.propertyAddr}} </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <br>
    <div class="section-title">客情跟踪</div>

    <el-row >
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="客户来源">{{customerSourceFormatter(formData.source)}}
            {{formData.customerDescribe}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="设计师">{{customerDesignerFormatter(formData.designer)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="设计部门">{{customerDepFormatter(formData.depId)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row >
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="跟单人">{{formData.merchandiser}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="跟单结果">{{followUpDataFormatter(formData.followResult)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="预约时间">{{formData.reserveTime}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-descriptions>
      <el-descriptions-item label="客情描述">{{formData.sourceRemark}}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions>
      <el-descriptions-item label="附件">
        <el-upload
            v-model:file-list="fileList"
            v-model:action="customerImgUrl"
            name="file"
            :limit="4"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            disabled
        >
          <el-icon>
            <Plus/>
          </el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl"/>
        </el-dialog>
      </el-descriptions-item>
    </el-descriptions>


      <br>
      <div class="section-title">量房信息</div>

    <el-row >
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="是否可量房">{{isQuantityHouseFormatter(formData.isQuantityHouse)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <<el-descriptions-item label="预约量房时间">{{formData.appointmentTime}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="实际量房时间">{{formData.physicalTime}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row >
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="量房结果">{{quantityHouseStatusFormatter(formData.quantityHouseStatus)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="量房人">{{formData.quantityHouseName}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="量房描述">{{formData.remark}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

      <el-descriptions>
        <el-descriptions-item label="量房描述">{{formData.remark}}</el-descriptions-item>
      </el-descriptions>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {useRoute, useRouter} from "vue-router";
import request from "@/utils/request";

const route = useRoute()
const router = useRouter()

// --------------------------------------------------
const formRef = ref()

const formData = ref({})


//定义数组用来保存车辆类型字典项
const customerStatusArr = ref([]);
const customerTypeArr = ref([]);
const customerSourceArr = ref([]);
const customerHouseTypeArr = ref([]);
onMounted(()=>{

  loadDictOptions(customerTypeArr,'customer_type');
  loadDictOptions(customerStatusArr,'customer_status');
  loadDictOptions(customerSourceArr,'customer_source');
  loadDictOptions(customerHouseTypeArr,'house_type');
})

//-------------------------客户状态----------------------------
const  customerStatusFormatter = (status)=>{
  if(!customerStatusArr.value){
    return status;
  }
  for(let item of customerStatusArr.value){
    if(item.value == status){
      status = item.label;
    }
  }
  return status;
}
//-------------------------客户类型----------------------------
const  customerTypeFormatter = (status)=>{
  if(!customerTypeArr.value){
    return status;
  }
  for(let item of customerTypeArr.value){
    if(item.value == status){
      status = item.label;
    }
  }
  return status;
}
//-------------------------客户来源----------------------------
const  customerSourceFormatter = (status)=>{
  if(!customerSourceArr.value){
    return status;
  }
  for(let item of customerSourceArr.value){
    if(item.value == status){
      status = item.label;
    }
  }
  return status;
}
//-------------------------户型----------------------------
const  customerHouseTypeFormatter = (status)=>{
  if(!customerHouseTypeArr.value){
    return status;
  }
  for(let item of customerHouseTypeArr.value){
    if(item.value == status){
      status = item.label;
    }
  }
  return status;
}
//对客户性别状态显示内容进行文字转换
const genderStatusFormatter = (status)=>{
  if(status ==1){
    status = '男';
  }else if(status ==0){
    status = '女';
  }
  return status;
}
//对客户跟单状态显示内容进行文字转换
const followUpDataFormatter = (status)=>{
  if(status ==10){
    status = '待跟单';
  }else if(status ==20){
    status = '已订单（财务待收款）';
  }
  return status;
}
//对量房结果状态显示内容进行文字转换
const quantityHouseStatusFormatter = (status)=>{
  if(status ==10){
    status = '已量房';
  }else if(status ==20){
    status = '待量房';
  }
  return status;
}
//对是否可量房状态显示内容进行文字转换
const isQuantityHouseFormatter = (status)=>{
  if(status ==10){
    status = '可量房';
  }else if(status ==20){
    status = '不可量房';
  }
  return status;
}
//数据 图片回显
const imgPath = ref('')
const loadCustomer = () => {
  let id = route.query.id
  request.get( '/api/crm/customer/select?id=' + id).then(res => {
    formData.value = res.data.list[0];
    //console.log(formData.value)
    loadProvince(formData.value.province)
    loadCity(formData.value.city)
    if (formData.value.district!=null){
      loadDistrict(formData.value.district)
    }else {
      return null
    }
    loadLeader(formData.value.depId)
    getDesigner(formData.value.designer)
    //图片回显
    for( let i= 0; i<res.data.list[0].imgUrl.length;i++){
      imgPath.value = BASE_URL+res.data.list[0].imgUrl[i];
      fileList.value.push({
        name:'img'+i,
        url:imgPath.value
      })
    }
    //console.log(fileList.value)
  })
}

onMounted(() => {
  loadCustomer()


})


//定义用于保存部门数组
const  deptArr = ref([])
const loadLeader = (id)=>{
  request.get(BASE_URL+'/api/crm/personnel/dept/select?id='+id).then(res=>{
    deptArr.value = res.data.list
    //console.log(res.data.list)
  })
}
const  customerDepFormatter = (status)=>{
  if(!deptArr.value){
    return status;
  }
  for(let item of deptArr.value){
    if(item.id === status){
      status = item.name;
    }
  }
  return status;
}


//定义用于保存设计师数组
const getDesignerArr =  ref([])
const  getDesigner = (id)=>{
  request.get('/api/crm/user/select?id='+id).then(res => {
    getDesignerArr.value = res.data
    //console.log(getDesignerArr.value)
  })
}
const  customerDesignerFormatter = (status)=>{
  if(!getDesignerArr.value){
    return status;
  }
  for(let item of getDesignerArr.value){
    if(item.id === status){
      status = item.name;
    }
  }
  return status;
}

//加载区县
const loadDistrict = (id)=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?id='+id).then(res=>{
    districtArr.value = res.data
    //console.log(districtArr.value)
  })
}
//定义区县数组
const districtArr = ref([]);
const  customerDistrictFormatter = (status)=>{
  if(!districtArr.value){
    return status;
  }
  for(let item of districtArr.value){
    if(item.id === status){
      status = item.name;
    }
  }
  return status;
}

//加载城市
const loadCity = (id)=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?id='+id).then(res=>{
    CityArr.value = res.data
    //console.log(CityArr.value)
    //console.log(formData.value.province)
  })
}
//定义城市数组
const CityArr = ref([]);
const  customerCityFormatter = (status)=>{
  if(!CityArr.value){
    return status;
  }
  for(let item of CityArr.value){
    if(item.id === status){
      status = item.name;
    }
  }
  return status;
}

//加载省份
const loadProvince = ()=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?parentId=0').then(res=>{
    provinceArr.value = res.data
    //console.log(provinceArr.value)
  })
}
//定义省份数组
const provinceArr = ref([]);
const  customerProvinceFormatter = (status)=>{
  if(!provinceArr.value){
    return status;
  }
  for(let item of provinceArr.value){
    if(item.id === status){
      status = item.name;
    }
  }
  return status;
}


/**图片上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const customerImgUrl = ref(BASE_URL + '/api/crm/file/upload');
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  let imgUrl = uploadFile.response.data;
  request.post('/api/crm/file/remove?imgUrl=' + imgUrl).then(res => {
    ElMessage.success('删除成功')
  })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  //console.log(uploadFile);
  //console.log(fileList.value[0].response.data);
}

//图片回显
/*const getImgPath = () => {
  let id = route.query.id
  request.post('/api/crm/selectImg/' + id).then(res => {
    imgPath.value = BASE_URL + res.data[0].imgUrl;
    //console.log(res.data)
    //console.log(imgPath.value)
    fileList.value = [{
      name: 'img',
      url: imgPath.value
    }]

  })
}*/

/**图片上传相关代码结束**/

</script>

<style scoped>
.section-title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 35px;
  line-height: 1rem;
  border-left: 3px solid #409EFF;
}

.section-title::after {
  content: '';
  position: absolute;
  left: -3px;
  bottom: -10px;
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
}
</style>
